<template>
  <div class="column" ref="column">
    <div ref="panel1" class="panel bar1"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <div class="title">
        <h2><span>产经新闻</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?bannerType=2">更多</router-link>
        </div>
      </div>
      <swiperBox ref="swiperBox" :panelWight="panelWight" :wrapperHeight="wrapperHeight"
                 v-if="bannerList.length > 0" :bannerList="bannerList"
      ></swiperBox>
      <div class="no-data" v-else>
        <img src="../../assets/images/no-data.png" alt="">
        <p>暂无数据</p>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div ref="panel2" class="panel bar1"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}"
    >
      <div class="title">
        <h2><span>产业环境</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?newsType=0">更多</router-link>
        </div>
      </div>
      <div class="wrap" ref="wrap">
        <ul v-if="newsList.length > 0">
          <li v-for="(item) in newsList">
            <router-link target="_blank" :to="{path:'/news/details',query:{newsId:item.newsId}}">
              <p class="tit">{{ item.newsTitle }}</p>
              <p class="time">{{ item.createTime.slice(0,11) }}</p>
            </router-link>
          </li>
        </ul>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div ref="panel3" class="panel line1"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}"
    >
      <div class="title">
        <h2><span>创新赋能</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?newsType=1">更多</router-link>
        </div>
      </div>
      <div class="left2_table hdleft2_table">
        <ul v-if="newsList2.length > 0">
          <li v-for="(item,index) in newsList2" :class="index %2 == 0 ? 'bg' : ''">
            <router-link target="_blank" :to="{path:'/news/details',query:{newsId:item.newsId}}">
              <p :class="['fl']"><b>{{ item.newsTitle }}</b><br>
              </p>
            </router-link>
            <p class="fr pt17">{{ item.createTime.slice(0,11) }}</p>
          </li>
        </ul>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div ref="panel4" class="panel pie1"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}"
    >
      <div class="title">
        <h2><span>产业研报</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?newsType=2">更多</router-link>
        </div>
      </div>
      <div class="wrap2 wrap">
        <ul v-if="newsList3.length > 0">
          <li v-for="(item) in newsList3">
            <router-link target="_blank" :to="{path:'/news/details',query:{newsId:item.newsId}}">
              <p>{{ item.newsTitle }}</p>
            </router-link>
          </li>
        </ul>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import { listBanner, listBannerQuery } from '../../api/system/banner'
import swiperBox from './swiper'
import { listNewsQuery } from '../../api/system/news'
import { screenWidth } from '@/utils/utils'

export default {
  name: 'right_part1',
  components: {
    swiperBox
  },
  props: {
    centerWidth: {
      type: Number,
      default: 0
    },
    centerHeight: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      panel_img: require('../../assets/images/line(1).png'),
      //块高度
      panelHeight: 0,
      //块宽度
      panelWight: 0,
      //轮播图高度
      wrapperHeight: 0,
      newsList: [],
      newsList2: [],
      newsList3: [],
      //轮播列表
      bannerList: [],
      queryParams: {
        bannerType: 1
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      swiper: null
    }
  },
  created() {
    this.panelHeight = this.centerHeight / 4
    this.getBannerList()
    this.getNewsList()
  },
  mounted() {
    this.panelWight = this.$refs.column.offsetWidth
    this.wrapperHeight = this.$refs.wrap.offsetHeight
  },
  methods: {
    setWidth(width,height){
      this.$refs['column'].style.width = (screenWidth() - width) / 2 + 'px'
      this.$refs.panel1.style.height = height / 4 + 'px'
      this.$refs.panel2.style.height = height / 4 + 'px'
      this.$refs.panel3.style.height = height / 4 + 'px'
      this.$refs.panel4.style.height = height / 4 + 'px'
    },
    async getBannerList() {
      const response = await listBanner(this.queryParams)
      this.bannerList = response.rows
      //图片拉取完成后执行
      setTimeout(() => {
        this.$refs.swiperBox.initSwiper()
      }, 100)
    },
    getNewsList() {
      listNewsQuery().then(res => {
        res.rows.forEach(item => {
          if (item.newsType == 0) {
            this.newsList.push(item)
          } else if (item.newsType == 1) {
            this.newsList2.push(item)
          } else if (item.newsType == 2) {
            this.newsList3.push(item)
          }
        })
      })
    }
  }

}
</script>
<style scoped lang="scss">
@import './css/right_part';
</style>
<style lang="scss">
.swiper-container {
  width: 300px;

  .img {
    width: 100%;
    height: calc(100% - 25px);

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

